<template>
  <div class="SecurityManagement">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item><a>安全管理</a></el-breadcrumb-item>
    </el-breadcrumb>
    <main>
      <el-tabs v-model="activeName">
        <el-tab-pane label="安全设置" name="security">
          <security-set />
        </el-tab-pane>
        <el-tab-pane label="操作日志查询" name="logSearch">
          <div class="search-con">
            <el-form :model="formModel" label-width="80px">
              <el-row :gutter="20">
                <el-col :span="10">
                  <el-form-item label="操作时间" prop="operate_time">
                    <el-date-picker
                      v-model="formModel.operate_time"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="操作人" prop="operator">
                    <person-search v-model="formModel.operator" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button @click="reset">重置</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="table-con">
            <el-table :data="tableData" border>
              <el-table-column
                label="操作时间"
                prop="operate_time"
                align="center"
              ></el-table-column>
              <el-table-column label="操作人" prop="operator">
                <template slot-scope="scope">
                  <show-person :personInfo="scope.row.operator" />
                </template>
              </el-table-column>
              <el-table-column
                label="操作对象"
                prop="target"
                align="center"
              ></el-table-column>
              <el-table-column
                label="操作内容"
                prop="content"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </main>
  </div>
</template>

<script>
import securitySet from "@/components/systemtools/SecuritySet.vue";
import PersonSearch from "@/components/public/personSearch.vue";
import ShowPerson from "@/components/public/showPerson.vue";
export default {
  name: "SecurityManagement",
  components: { securitySet, PersonSearch, ShowPerson },
  data() {
    return {
      activeName: "security",
      formModel: {
        operate_time: ["", ""],
        operator: {},
      },
      tableData: [
        {
          operate_time: "2023-04-24 14:50:27",
          operator: {
            employee_id: "666",
            employee_name: "张龙",
          },
          target: "角色管理",
          content: "管理员（zhaodonglan）执行了删除角色（zhaodonglan）操作",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    search() {},
    reset() {
      this.formModel = {
        operate_time: ["", ""],
        operator: {},
      };
    },
  },
};
</script>
<style lang="less" scoped>
.SecurityManagement {
  main {
    padding: 10px 20px;
    background-color: #fff;
    min-height: calc(100vh - 150px);
  }
}
</style>
